<template>
  <div class="user">
    <div class="header">
      <img
        src="http://liufusong.top:8080/img/profile/bg.png"
        alt
      />
      <div class="message">
        <div class="head-portrait">
          <img
            src="http://liufusong.top:8080/img/profile/avatar.png"
            alt
          />
        </div>
        <div class="username">游客</div>
        <van-button
          to="/login"
          size="small"
          type="primary"
        >去登录</van-button>
      </div>
    </div>
    <van-grid :column-num="3" :border="false" icon-size="22">
      <van-grid-item icon="star-o" text="我的收藏"/>
      <van-grid-item icon="home-o" text="我的出租"/>
      <van-grid-item icon="clock-o" text="看房记录"/>
      <van-grid-item icon="idcard" text="成为房主"/>
      <van-grid-item icon="user-o" text="个人资料"/>
      <van-grid-item icon="service-o" text="联系我们"/>
    </van-grid>
    <div class="img">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'user-page',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  methods: {}
}
</script>

<style scoped lang='less'>
.header {
  position: relative;
  background-color: #fff;
  min-height: 300px;
  img {
    width: 100%;
  }
  .message {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 85%;
    height: 55%;
    background-color: #fff;
    box-shadow: 0 0 10px 3px #ddd;
    .head-portrait {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 5px solid #eee;
      box-shadow: 0 2px 2px #bdbdbd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 0;
      img {
        width: 100%;
      }
    }
    .username {
      text-align: center;
      margin: 55px auto 20px;
      font-size: 13px;
    }
    .van-button {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      line-height: 30px;
      width: 69px;
      height: 30px;
      border-radius: 5px;
    }
  }
}
.van-grid {
  padding-top: 10px;
  background-color: #fff;
  .van-grid-item {
    margin-bottom: 10px;
    /deep/ .van-grid-item__text {
      font-size: 13px;
    }
  }
}
.img {
  padding-top: 10px;
  text-align: center;
  background-color: #fff;
  img {
    width: 92%;
  }
}
// src="http://liufusong.top:8080/img/profile/bg.png"
</style>
